import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutterapp/component/markdown.dart';
import 'package:flutterapp/entities/assets_entities.dart';

class ImagePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => ImagePageState();
}

class ImagePageState extends State<ImagePage> {
  @override
  Widget build(BuildContext context) {
    List<Widget> _widgets = List<Widget>();

    // 加载本地图片
    _widgets.addAll([
      Text("1、加载assets图片",
          style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
      Container(
        alignment: Alignment.center,
        child: Image.asset("assets/images/huoying.png"),
      ),
      Container(
          alignment: Alignment.centerRight,
          child: FlatButton(
              onPressed: () => _push(context,
                  mark: MarkdownEntity("assets/markdown/image_local.md", title: "Image加载assets图片")),
              child: Text(
                "查看代码片段",
                style: TextStyle(color: Colors.lightBlue),
              )))
    ]);
    // 加载网络图片
    _widgets.addAll([
      Text(
        "2、Image 加载网络图片",
        style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      ),
      Container(
        alignment: Alignment.center,
        margin: EdgeInsets.all(15),
        child: Image.network("http://ssoonn.com/css/image/logo.png"),
      ),
      Container(
          alignment: Alignment.centerRight,
          child: FlatButton(
              onPressed: () => _push(context,
                  mark: MarkdownEntity("assets/markdown/image_net.md",
                      title: "图片网络加载")),
              child: Text(
                "查看代码片段",
                style: TextStyle(color: Colors.lightBlue),
              )))
    ]);
    // 占位Loading
    _widgets.addAll([
      Text("3、占位Loading",
          style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
      Container(
        width: double.infinity,
        height: 220,
        alignment: Alignment.center,
        child: FadeInImage.assetNetwork(
            placeholder: "assets/images/loading.gif",
            image:
                "http://image.lnstzy.cn/aoaodcom/2019-07/30/201907300912376226.jpg.h1080.jpg?t=${Random().nextInt(6)}"),
      ),
      Container(
          alignment: Alignment.centerRight,
          child: FlatButton(
              onPressed: () => _push(context,mark: MarkdownEntity(
                "assets/markdown/fade_image.md",
                title: "占位Loading"
              )),
              child: Text(
                "查看代码片段",
                style: TextStyle(color: Colors.lightBlue),
              )))
    ]);

    _content() => Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: _widgets,
        );

    return Scaffold(
      appBar: AppBar(
        title: Text("Image 组件"),
      ),
      body: Container(
          width: double.infinity,
          height: double.infinity,
          margin: EdgeInsets.all(15),
          child: Container(
            width: double.infinity,
            height: double.infinity,
            child: Scrollbar(
              child: SingleChildScrollView(
                padding: EdgeInsets.all(10),
                child: _content(),
              ),
            ),
          )),
    );
  }

  void _push(BuildContext context, {mark: MarkdownEntity}) {
    Navigator.of(context).push(MaterialPageRoute(
        builder: (context) => MarkDownPage(),
        settings: RouteSettings(arguments: mark)));
  }
}
